<!-- 结构 -->
<script setup lang="ts">
import ChildComp from './components/ChildComp.vue';
import { useCounterStore } from '@/stores/counter';

// store中有状态和函数
const store = useCounterStore()

</script>

<!-- JS逻辑 -->
<template>
  <div class="app-page">

    <div>父组件 - {{ store.count }} - {{ store.doubleCount }}</div>
    <button @click="store.update()">count++</button>
    <button @click="store.asyncUpdate()">async update</button>
    <ChildComp />

  </div>
</template>

<!-- 样式 -->
<style lang="css" scoped>
.app-page {
  width: 600px;
  height: 400px;
  background-color: red;
}
</style>